<template>
  <div class="promote">
    <div>
      <el-button type="primary" @click="addlist">创建群邀请</el-button>
      <el-input
        v-model="name"
        class="w-50 m-2"
        style="width: 200px;float: right;"
        placeholder="搜索任务名称"
        :suffix-icon="Search"
        @input="postcolonizationlistapi"
      />
    </div>
    <div style="background-color: #fff;margin-top: 15px;margin-top: 15px;">
      <el-table :data="datalist" style="width: 100%">
        <el-table-column prop="name" label="任务名称" width="180" />
        <el-table-column prop="group_name" label="群名称" width="180" />
        <el-table-column prop="staff-name" label="发送邀请成员" />
        <el-table-column prop="ctime" label="创建时间" />
        <el-table-column prop="customer_size" label="已邀请客户" />
        <el-table-column prop="group_customer_size" label="已入群客户" />
        <el-table-column prop="staff_not_size" label="未发送成员" />
        <el-table-column prop="customer_not_size" label="未邀请客户" />
        <el-table-column prop="address" label="操作" width="280"  >
          <template #default="scope">
            <el-button
              type="primary"
              text
              >提醒发送</el-button>
              <el-button
              type="primary"
              text
              >详情</el-button>
              <el-button
              type="primary"
              text
              >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { ref, onBeforeMount,onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { postcolonizationlist } from '@/api'
const router = useRouter()
const addlist=()=>{
  router.push('addbuilding')
}
const name = ref()
const datalist=ref()
const postcolonizationlistapi =()=>{
  postcolonizationlist({name:name.value}).then(res=>{
    datalist.value=res.data.item
  })
}
onMounted(()=>{
  postcolonizationlistapi()
})
</script>
<style>
.promote{
  padding: 20px;
}
</style>